#sakura-panel
  position: fixed;
  z-index: $zIndex-4;
  right: 0;
  bottom: 0;
  width: 60px;
  height: 60px;
  .sakura-icon
    position: absolute;
    z-index: $zIndex-1;
    right: 12px;
    bottom: 12px;
    width: 28px;
    height: 28px;
    animation: rotate 2s linear 0s infinite;
    cursor($cursor-link-img);
    +sp-layout()
      display: none;
  .sakura-mask
    position: absolute;
    z-index: $zIndex-2;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: none;
  .sakura-container
    position: absolute;
    z-index: $zIndex-3;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: none;
    pointer-events: none;
    perspective: 600px;
    transform: translateY(-100%);
    .wrapper
      position: relative;
      width: 100vw;
      height: 100vh;
      will-change: transform;
      .short-line,
      .long-line
        position: absolute;
        top: 0px;
        left: 50%;
        width: 600px;
        height: calc(50% - 175px);
        transform: translateX(-50%);
        .line
          position: absolute;
          width: 2px;
          height: 150%;
          background-color: $panel-color;
      .short-line
        .line
          bottom: 0;
          &:nth-child(1)
            left: 55px;
          &:nth-child(2)
            right: 55px;
      .long-line
        .line
          bottom: -25px;
          &::after
            content: '';
            display: block;
            position: absolute;
            left: -4px;
            bottom: -4px;
            width: 10px;
            height: 10px;
            background-color: $panel-color;
            border-radius: 50%;
          &:nth-child(1)
            left: 25px;
          &:nth-child(2)
            right: 25px;
      .main
        pointer-events: all;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 600px;
        text-align: center;
        border-radius: 12px;
        box-shadow: $bg-dark-dim 0px 0px 20px;
        transform: translate(-50%, -50%);
        .body
          position: relative;
          width: 100%;
          height: 250px;
          background-color: white;
          border-radius: 12px 12px 0 0;
          .swiper-wrapper
            width: 100%;
            height: 100%;
            overflow: hidden;
            border-radius: 12px 12px 0 0;
            .swiper
              width: 100%;
              display: flex;
              &.animate
                transition: transform 0.4s ease-in-out;
              .swiper-item
                width: 100%;
                flex: 1 0 auto;
                .header
                  h2
                    width: 100%;
                    height: 50px;
                    font-size: 20px;
                    border-bottom: 1px solid $panel-color;
                    background-color: $panel-bg-color;
                    flexCenter();
                .container
                  width: 100%;
                  height: 200px;
                  padding: 10px;
                  flexCenter();
                  justify-content: space-around;
                  .item
                    height: 180px;
                    h3
                      margin-bottom: 10px;
                      font-size: 18px;
                      font-weight: 400;
                    img
                      width: 150px;
                      height: 150px;
                      border-radius: 3px;
                      margin: auto;
                      margin: 0 auto;
                      max-width: 100%;
                      border-radius: 3px;
                      box-shadow: rgba(0,0,0,0.2) 0 10px 12px;
                      border: 6px solid transparent;
                      transition: all 0.3s ease-out;
                      &:hover
                        border-color: $purple-dark;
          button.left-btn,
          button.right-btn
            position: absolute;
            top: 50%;
            width: 66px;
            height: 66px;
            overflow: hidden;
            font-size: 28px;
            border-radius: 50%;
            box-shadow: $bg-dark-dim 0px 0px 10px;
            background-color: $panel-bg-color;
            transform: translate(-50%, -50%);
            transition: color 0.3s ease-in-out;
            i.icon
              display: inline-block;
              font-size: 28px;
              color: $panel-color;
              transition: color 0.3s ease-out;
            &::before
              content: '';
              display: block;
              position: absolute;
              left: 0;
              top: 0;
              width: 66px;
              height: 66px;
              border-radius: 50%;
              transform: scale(0);
              background-color: $panel-color;
              transition: transform 0.3s ease-in-out;  
            &:hover
              i.icon
                color: $whitesmoke;
              &::before
                transform: scale(1); 
          button.left-btn
            left: 0;
            transform: translate(-50%, calc(-50% + 50px));
            i.icon
              transform: translateX(-2px);
          button.right-btn
            right: 0;
            transform: translate(50%, calc(-50% + 50px));
            i.icon
              transform: translateX(2px);
        .footer
          display: block;
          height: 100px;
          border-radius: 0 0 12px 12px;
          background-color: $panel-bg-color;
          .like
            position: relative;
            width: 100%;
            height: 50px;
            border-bottom: 1px solid #5d3523;
            flexCenter();
            font-size: $font-size-larger;
            background: white;
            span.like-num
              color: $purple-deep;
              margin-left: 4px;
              margin-right: 4px;
          .star
            position: absolute;
            left: 50%;
            bottom: 0;
            width: 200px;
            height: 50px;
            font-size: 16px;
            line-height: 48px;
            letter-spacing: 2px;
            overflow: hidden;
            border-style: none;
            border-radius: 30px;
            background-color: $purple;
            transform: translate(-50%, 50%);
            transition: all 0.5s cubic-bezier(0.86, -0.02, 0.08, 1.02) 0s;
            &:hover
              box-shadow: $purple 0px 0px 10px;
              &::before
                transform: translateX(0px);
            &::before,
            &::after
              content: '';
              display: block;
              position: absolute;
              top: 0px;
              left 0px;
              height: 100%;
              width: 100%;
              border-radius: 30px;
            &::before
              background-color: $purple-deep;
              transform: translateX(-100%);
              transition: all 0.5s cubic-bezier(0.86, -0.02, 0.88, 1.02) 0s;
            &::after
              content: attr(data-title);
              color: white;
              letter-spacing: 1px;


  &.show-panel
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: $bg-white;
    .sakura-mask
      display: block;
    .sakura-container
      display: block;
      transform: translateY(0);
      will-change: transform;
      animation: 0.9s ease-out 0s 1 normal forwards running dropDown;
      .wrapper
        will-change: transform;
        animation: 3s ease-out 0s 1 normal forwards running dropWave;
